<script setup>
import { inspectionMap } from "@/api/inspection/resource-manage.js";
import { ref, toRefs, watch } from "vue";

// 接收props
const props = defineProps({
  visible: { type: Boolean, default: false },
});
const { visible } = toRefs(props);
const emit = defineEmits(["update:visible", "handleConfirm"]);

// 关闭弹窗
function onCloseDialog() {
  emit("update:visible", false);
}

// 选择地图
function onSelectMap(item) {
  onCloseDialog();
  emit("handleConfirm", item);
}

// 地图列表数据
const mapData = ref([]);

// 获取地图列表
watch(visible, async (val) => {
  if (val) {
    const response = await inspectionMap.read();
    mapData.value = response.data.list;
  }
});
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="切换地图"
    width="800px"
    :close-on-click-modal="false"
    @close="onCloseDialog()"
  >
    <div class="h-[500px] max-h-[500px] overflow-auto grid grid-cols-4 gap-2">
      <div
        v-for="item in mapData"
        :key="item.id"
        class="h-[180px] w-[180px] text-center"
        @click="onSelectMap(item)"
      >
        <el-image
          class="w-[160px] h-[160px] cursor-pointer"
          :src="item.url"
          fit="cover"
        />
        <div>{{ item.name }}</div>
      </div>
    </div>
  </el-dialog>
</template>
